<template>
    <div class="consumption-list">
      <h2 class="text-center text-lg font-bold mb-4">今日总计消费 {{ total }}</h2>
      <div class="flex flex-col items-center">
        <div class="w-full max-w-sm rounded overflow-hidden shadow-md">
          <div class="px-6 py-4">
            <div class="font-semibold text-xl mb-2">消费统计</div>
            <ul class="list-none p-0 m-0">
              <li class="border-b border-gray-300 px-4 py-2">
                <span class="text-gray-700">总计:</span> {{ total }}
              </li>
              <!-- Add more categories here -->
            </ul>
          </div>
          <div class="px-6 py-4">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="(item, index) in consumptionData" :key="index">
                  <td class="px-6 py-4 whitespace-nowrap">{{ item.name }}</td>
                  <td class="px-6 py-4 whitespace-nowrap">{{ item.note }}</td>
                  <td class="px-6 py-4 whitespace-nowrap">{{ item.amount }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    name: 'ConsumptionList',
    setup() {
      const total = ref(0);
      const consumptionData = ref([
        // Add sample data here
      ]);
  
      return {
        total,
        consumptionData,
      };
    },
  };
  </script>
  
  <style scoped>
  /* Add custom styles for the ConsumptionList component */
  </style>